<template>
  <view class="my-page page-container">
    <view class="top">
      <view class="profile" @click="goToEditProfile">
        <image
          class="avatar"
          :src="userInfo.avatarUrl || '/static/images/user/avatar-default.png'"
          mode="aspectFill"
        />
        <view class="info">
          <text class="phone">{{ isLogin ? (userInfo.nickname || '未设置昵称') : '点击登录/注册' }}</text>
          <view class="meta" v-if="isLogin">
            <text class="uid">邀请码：{{ userInfo.inviteCode || '暂无' }}</text>
            <text class="points">积分：{{ userInfo.points || 0 }}</text>
          </view>
          <text class="expire" v-if="isLogin">注册时间：{{ formatTime(userInfo.createTime) || '暂无' }}</text>
        </view>
      </view>

      <view class="vip-card" @click="toPath('/subPages/vip/index')" v-if="showVipCard">
        <image class="vip-icon" src="/static/images/user/icon-vip-badge.png" mode="widthFix" />
        <text class="vip-text">{{ getVipCardText() }}</text>
        <view class="vip-btn">{{ getVipButtonText() }}</view>
      </view>
    </view>

    <view class="menu">
      <view class="menu-item" @click="toPath('/subPages/settings/set-push')" v-if="showSubscribe">
        <image class="icon" src="/static/images/user/icon-bell.png" mode="widthFix" />
        <text class="label">订阅提醒</text>
        <view class="chevron">
          <uv-icon name="arrow-right" size="28"></uv-icon>
        </view>
      </view>
      <view class="menu-item" @click="goToInvite">
        <image class="icon" src="/static/images/user/icon-invite.png" mode="widthFix" />
        <text class="label">邀请好友</text>
        <view class="chevron">
          <uv-icon name="arrow-right" size="28"></uv-icon>
        </view>
      </view>
      <view class="menu-item" @click="goToFaq" v-if="showQuestion">
        <image class="icon" src="/static/images/user/icon-faq.png" mode="widthFix" />
        <text class="label">常见问题</text>
        <view class="chevron">
          <uv-icon name="arrow-right" size="28"></uv-icon>
        </view>
      </view>
      <view class="menu-item" @click="goToFeedback">
        <image class="icon" src="/static/images/user/icon-feedback.png" mode="widthFix" />
        <text class="label">有奖意见反馈</text>
        <view class="chevron">
          <uv-icon name="arrow-right" size="28"></uv-icon>
        </view>
      </view>
      <view class="menu-item" @click="goToCustomerService">
        <image class="icon" src="/static/images/user/icon-support.png" mode="widthFix" />
        <text class="label">联系客服</text>
        <view class="chevron">
          <uv-icon name="arrow-right" size="28"></uv-icon>
        </view>
      </view>
      <view class="menu-item" @click="goToPrivacy">
        <image class="icon" src="/static/images/user/icon-privacy.png" mode="widthFix" />
        <text class="label">隐私政策</text>
        <view class="chevron">
          <uv-icon name="arrow-right" size="28"></uv-icon>
        </view>
      </view>
      <view class="menu-item" @click="goToChangePassword" v-if="isLogin">
        <image class="icon" src="/static/images/user/reset-password.png" mode="widthFix" />
        <text class="label">修改密码</text>
        <view class="chevron">
          <uv-icon name="arrow-right" size="28"></uv-icon>
        </view>
      </view>
      <view class="menu-item" @click="showLogoutModal" v-if="isLogin">
        <image class="icon" src="/static/images/user/icon-settings.png" mode="widthFix" />
        <text class="label">安全退出</text>
        <view class="chevron">
          <uv-icon name="arrow-right" size="28"></uv-icon>
        </view>
      </view>
      <view class="menu-item last" @click="showDeleteAccountModal" v-if="isLogin">
        <image class="icon" src="/static/images/user/icon-logoff.png" mode="widthFix" />
        <text class="label delete-account">注销账户</text>
        <view class="chevron">
          <uv-icon name="arrow-right" size="28"></uv-icon>
        </view>
      </view>  
    </view>

    <!-- 版本号 - 仅 APP 显示 -->
    <!-- #ifdef APP-PLUS -->
    <view class="version-info">
      <text class="version-text">版本号：{{ appVersion }}</text>
    </view>
    <!-- #endif -->

    <!-- 退出登录确认弹窗 -->
    <uv-modal
      ref="logoutModal"
      title="退出登录"
      content="确认要退出登录吗？"
      :show-cancel-button="true"
      confirm-text="确认退出"
      cancel-text="取消"
      confirm-color="#00d4aa"
      @confirm="handleLogout"
    ></uv-modal>

    <!-- 注销账户确认弹窗 -->
    <uv-modal
      ref="deleteAccountModal"
      title="注销账户"
      content="注销账户后，您的所有数据将被永久删除且不可恢复，包括账户信息、积分、高级服务权益等。确认要注销账户吗？"
      :show-cancel-button="true"
      confirm-text="确认注销"
      cancel-text="取消"
      confirm-color="#ff4757"
      @confirm="handleDeleteAccount"
    ></uv-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserMsg } from '@/api/auth'
import { getStrategyPushType } from '@/api/tactics'
import { deleteAccount } from '@/api/user'
import { getToken } from '@/utils/auth'

export default {
  name: 'MyPage',
  data() {
    return {
      userInfo: {
        nickname: '',
        createTime: '',
        avatarUrl: '',
        gender: '',
        points: 0,
        inviteCode: '',
        memberExpireDate: '', // 会员过期时间
        memberType: '', // 会员类型
      },
      loading: false,
        appVersion: '1.0.2', // APP版本号
        showVipCard: false,
        showSubscribe: false,
        isLoadingConfig: false, // 防止重复调用配置接口
        showStrategyEntry: false,
        showStrategyEmail: false,
        strategyEmailPush: false,
        strategySmsPush: false,
        showQuestion: false,
    }
  },

  computed: {
    ...mapGetters('user', ['token']),
    ...mapGetters(['isVip', 'userVip', 'memberExpireDate', 'memberType']),
    // 从 store 获取用户信息
    storeUserInfo() {
      return this.$store.state.user.userMsg
    },
    // 是否已登录
    isLogin() {
      return !!this.token
    }
  },

  onShow() {
    // 未登录时不做任何操作
    if (!this.isLogin) {
      return
    }
    
    // 每次显示页面时获取最新用户信息
    console.log('My页面 - 当前token:', this.token)
    console.log('My页面 - 是否登录:', this.$store.getters['user/isLogin'])
    // 注意：全局 mixin 已经会调用 updateVipStatus 更新用户信息（包括 memberExpireDate 和 memberType）
    // 这里只需要从 store 同步数据到本地，避免重复调用接口
    this.syncUserInfoFromStore()
    
    // 如果还没有获取配置且不在加载中，调用接口
    if (!this.showVipCard && !this.showSubscribe && !this.isLoadingConfig && this.isLogin) {
      this.getStrategyPushType()
    }
  },

  mounted() {
    // mounted 时不需要调用 fetchUserInfo，因为 onShow 会自动触发
    // 只在这里进行一些初始化操作
    this.getAppVersion()
    // 配置接口已在 onShow 中调用，这里不再重复调用
  },

    methods: {
    getStrategyPushType() {
      if (this.isLoadingConfig) return // 防止重复调用
      this.isLoadingConfig = true
      
      getStrategyPushType().then(res => {
          console.log('策略推送类型配置:', res)
          if (res.code === 200 && res.data) {   
            const { showVip, showSubscribe, showStrategyEntry, showStrategyEmail, strategyEmailPush, strategySmsPush, showQuestion } = res.data
            this.showVipCard = showVip
            this.showSubscribe = showSubscribe
            this.showStrategyEntry = showStrategyEntry
            this.showStrategyEmail = showStrategyEmail
            this.strategyEmailPush = strategyEmailPush
            this.strategySmsPush = strategySmsPush
            this.showQuestion = showQuestion
          }
      })
    },
    toPath(url) {
      uni.navigateTo({
        url,
      })
    },
    
    /**
     * 获取 APP 版本号
     */
    getAppVersion() {
      // #ifdef APP-PLUS
      try {
        const systemInfo = uni.getSystemInfoSync()
        // 获取应用版本号（需要在 manifest.json 中配置 versionName）
        if (systemInfo.appVersion) {
          this.appVersion = systemInfo.appVersion
        } else {
          // 如果获取不到，使用默认版本号
          this.appVersion = '1.0.2'
        }
        console.log('APP版本号:', this.appVersion)
      } catch (e) {
        console.error('获取版本号失败:', e)
        this.appVersion = '1.0.2'
      }
      // #endif
    },
    
    // 从store同步用户信息到本地（避免重复调用接口）
    syncUserInfoFromStore() {
      const userMsg = this.$store.getters['user/userMsgInfo']
      const userInfo = this.$store.state.user.userInfo
      
      if (userMsg || userInfo) {
        this.userInfo = {
          nickname: userMsg?.nickname || userInfo?.nickname || '',
          createTime: userMsg?.createTime || userInfo?.createTime || '',
          avatarUrl: userMsg?.avatarUrl || userInfo?.avatarUrl || '',
          gender: userMsg?.gender || userInfo?.gender || '',
          points: userMsg?.points || userInfo?.points || 0,
          inviteCode: userMsg?.inviteCode || userInfo?.inviteCode || '',
          memberExpireDate: userInfo?.memberExpireDate || '',
          memberType: userInfo?.memberType || '',
        }
        console.log('用户信息已从store同步:', this.userInfo)
      }
    },

    // 获取用户信息（仅在需要强制刷新时调用）
    async fetchUserInfo() {
      // 如果正在加载中，避免重复请求
      if (this.loading) {
        console.log('正在加载用户信息，跳过重复请求')
        return
      }

      if (!this.token) {
        console.log('用户未登录')
        return
      }

      // 先从 store 中获取数据，立即显示
      if (this.storeUserInfo && this.storeUserInfo.nickname) {
        this.userInfo = { ...this.storeUserInfo }
        console.log('从 store 获取用户信息:', this.userInfo)
      }

      try {
        this.loading = true
        console.log('开始从接口获取最新用户信息...')

        // 调用 store action 来获取并更新用户信息
        await this.$store.dispatch('user/getUserMsg')

        // 从 store 中获取更新后的数据
        this.userInfo = { ...this.storeUserInfo }
        console.log('用户信息已更新:', this.userInfo)
      } catch (error) {
        console.error('获取用户信息失败：', error)
        // 如果接口失败，继续使用 store 中的数据，不显示错误提示
        if (!this.userInfo.nickname) {
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none',
          })
        }
      } finally {
        this.loading = false
      }
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      
      // 如果是数组格式，转换为字符串（兼容旧数据）
      if (Array.isArray(timeStr)) {
        return timeStr[0] + '-' + timeStr[1] + '-' + timeStr[2]
      }
      
      // 如果是字符串格式 "2025-09-02 01:38:35"，提取日期部分并格式化
      if (typeof timeStr === 'string') {
        // 提取日期部分 "2025-09-02"
        const datePart = timeStr.split(' ')[0]
        const [year, month, day] = datePart.split('-')
        
        // 返回格式化后的日期，例如 "2025年9月2日"
        return `${year}年${parseInt(month)}月${parseInt(day)}日`
      }
      
      return timeStr
    },

    /**
     * 计算会员剩余天数
     * @param {String} expireDate 会员过期时间 格式：2025-12-19 14:32:49
     * @returns {Number} 剩余天数
     */
    calculateRemainingDays(expireDate) {
      if (!expireDate) return 0
      
      try {
        // 将过期时间转换为时间戳
        const expireTime = new Date(expireDate.replace(/-/g, '/')).getTime()
        // 当前时间戳
        const currentTime = new Date().getTime()
        // 计算时间差（毫秒）
        const timeDiff = expireTime - currentTime
        
        // 如果已过期，返回0
        if (timeDiff <= 0) return 0
        
        // 转换为天数（向上取整）
        const days = Math.ceil(timeDiff / (1000 * 60 * 60 * 24))
        return days
      } catch (error) {
        console.error('计算会员剩余天数失败:', error)
        return 0
      }
    },

    /**
     * 格式化会员信息显示文本
     * @returns {String} 会员信息文本
     */
    getMemberInfoText() {
      const { memberType, memberExpireDate } = this.userInfo
      
      // 如果没有会员类型或过期时间，说明未解锁高级服务
      if (!memberType || !memberExpireDate) {
        return '未解锁高级服务'
      }
      
      // 计算剩余天数
      const remainingDays = this.calculateRemainingDays(memberExpireDate)
      
      // 如果已过期
      if (remainingDays <= 0) {
        return '已过期'
      }
      
      // 返回格式：季度会员 100天后到期
      return `${memberType} ${remainingDays}天后到期`
    },

    /**
     * 获取VIP卡片显示文本
     * @returns {String} VIP卡片文本
     */
    getVipCardText() {
      const { memberType, memberExpireDate } = this.userInfo
      
      // 如果没有会员类型或过期时间，说明未解锁高级服务
      if (!memberType || !memberExpireDate) {
        return '解锁高级服务 尊享专属权益'
      }
      
      // 计算剩余天数
      const remainingDays = this.calculateRemainingDays(memberExpireDate)
      
      // 如果已过期
      if (remainingDays <= 0) {
        return '高级服务已过期 续费享更多权益'
      }
      
      // 返回格式：季度会员 100天后到期
      return `${memberType} ${remainingDays}天后到期`
    },

    /**
     * 获取VIP按钮显示文本
     * @returns {String} 按钮文本
     */
    getVipButtonText() {
      const { memberType, memberExpireDate } = this.userInfo
      
      // 如果没有会员类型或过期时间，或者已过期，显示"解锁高级服务"
      if (!memberType || !memberExpireDate) {
        return '解锁高级服务'
      }
      
      // 计算剩余天数
      const remainingDays = this.calculateRemainingDays(memberExpireDate)
      
      // 如果已过期，显示"解锁高级服务"
      if (remainingDays <= 0) {
        return '解锁高级服务'
      }
      
      // 如果是有效会员，显示"续费"
      return '续费'
    },

    goToTestPage() {
      uni.navigateTo({
        url: '/pages/test-user-msg',
      })
    },

    // 意见反馈
    goToFeedback() {
      uni.navigateTo({
        url: '/subPages/ai/feedback',
      })
    },

    // 隐私政策
    goToPrivacy() {
      uni.navigateTo({
        url: '/subPages/auth/privacy',
      })
    },

    // 常见问题
    goToFaq() {
      uni.navigateTo({
        url: '/subPages/help/faq',
      })
    },

    // 联系客服
    goToCustomerService() {
      uni.navigateTo({
        url: '/subPages/help/customer-service',
      })
    },

    // 邀请好友
    goToInvite() {
      if (!this.isLogin) {
        uni.navigateTo({ url: '/subPages/auth/login' })
        return
      }
      uni.navigateTo({
        url: '/subPages/invite/index',
      })
    },

    /**
     * 跳转到编辑资料页面
     */
    goToEditProfile() {
      if (!this.isLogin) {
        uni.navigateTo({ url: '/subPages/auth/login' })
        return
      }
      uni.navigateTo({
        url: '/subPages/user/edit-profile',
      })
    },

    /**
     * 跳转到修改密码页面
     */
    goToChangePassword() {
      if (!this.isLogin) {
        uni.navigateTo({ url: '/subPages/auth/login' })
        return
      }
      uni.navigateTo({
        url: '/subPages/user/change-password',
      })
    },

    /**
     * 显示退出登录弹窗
     */
    showLogoutModal() {
      if (!this.isLogin) return
      console.log('打开退出登录弹窗')
      this.$refs.logoutModal.open()
    },

    /**
     * 确认退出登录
     */
    async handleLogout() {
      console.log('确认退出登录')
      try {
        // 异步调用退出登录接口（会自动清除token和用户信息）
        await this.$store.dispatch('user/fedLogOut')

        // 跳转到登录页
        uni.reLaunch({
            url: '/subPages/auth/login',
        })
      } catch (error) {
        console.error('退出登录失败:', error)
        // 即使接口调用失败，也清除本地数据并跳转
        // fedLogOut 内部已经处理了清除逻辑，但为了确保清除，这里也调用一次
        this.$store.commit('user/CLEAR_USER_INFO')
        this.$store.commit('token/CLEAR_TOKEN')
        
        uni.hideLoading()
        uni.showToast({
          title: '退出成功',
          icon: 'none',
          duration: 1500,
        })

        setTimeout(() => {
          uni.reLaunch({
            url: '/subPages/auth/login',
          })
        }, 1500)
      }
    },

    /**
     * 显示注销账户弹窗
     */
    showDeleteAccountModal() {
      if (!this.isLogin) return
      console.log('打开注销账户弹窗')
      this.$refs.deleteAccountModal.open()
    },

    /**
     * 确认注销账户
     */
    async handleDeleteAccount() {
      console.log('确认注销账户')
      
      // 显示加载提示
      uni.showLoading({
        title: '注销中...',
        mask: true
      })

      try {
        // 调用注销账户接口
        const response = await deleteAccount()
        
        if (response.code === 200 || response.code === 20000) {
          uni.hideLoading()
          
          // 清除本地用户信息和token
          this.$store.commit('user/CLEAR_USER_INFO')
          this.$store.commit('token/CLEAR_TOKEN')
          
          uni.showToast({
            title: '账户已注销',
            icon: 'none',
            duration: 2000,
          })

          // 延迟跳转到登录页
          setTimeout(() => {
            uni.reLaunch({
              url: '/subPages/auth/login',
            })
          }, 2000)
        } else {
          throw new Error(response.message || '注销失败')
        }
      } catch (error) {
        console.error('注销账户失败:', error)
        uni.hideLoading()
        
        // 即使接口调用失败，也清除本地数据并跳转（确保用户能够退出）
        this.$store.commit('user/CLEAR_USER_INFO')
        this.$store.commit('token/CLEAR_TOKEN')
        
        uni.showToast({
          title: error.message || '注销失败，已清除本地数据',
          icon: 'none',
          duration: 2000,
        })

        setTimeout(() => {
          uni.reLaunch({
            url: '/subPages/auth/login',
          })
        }, 2000)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.my-page {
  box-sizing: border-box;
  padding-bottom: 40rpx;
}

.top {
  padding: 40rpx 24rpx 24rpx;
  padding-top: calc(var(--status-bar-height) + 40rpx);
  background: url('/static/images/user/my-header-bg.png') no-repeat top center;
  background-size: 100% auto;
}

.profile {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  margin-right: 24rpx;
  background-color: #fff;
  border-radius: 50%;
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.edit-icon {
  display: flex;
  align-items: center;
  padding-left: 16rpx;
}

.phone {
  font-size: 36rpx;
  font-weight: 600;
  color: #0e1e25;
}

.meta {
  margin: 8rpx 0;
}

.uid {
  margin-right: 16rpx;
  font-size: 24rpx;
  color: #5e6c74;
}

.points {
  font-size: 24rpx;
  color: #5e6c74;
}

.expire {
  font-size: 24rpx;
  color: #5e6c74;
}

.vip-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 24rpx;
  margin-top: 28rpx;
  background: url('/static/images/user/my-bg.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(6, 203, 182, 0.15);
}

.vip-icon {
  width: 50rpx;
  height: 40rpx;
  margin-right: 12rpx;
}

.vip-text {
  flex: 1;
  margin-left: 12rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
}

.vip-btn {
  padding: 10rpx 22rpx;
  font-size: 24rpx;
  font-weight: 600;
  color: #fff;
  background: #5fded1;
  border-radius: 999rpx;
}

.menu {
  margin: 24rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 12rpx 40rpx rgba(16, 30, 36, 0.06);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 38rpx 30rpx;
}

.menu-item.last {
  border-bottom: none;
}

.icon {
  width: 35rpx;
  height: 35rpx;
  margin-right: 20rpx;
}

.label {
  flex: 1;
  font-size: 28rpx;
  color: #0e1e25;
}

.delete-account {
  color: #ff4757;
}

// 版本信息
.version-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 24rpx;
  margin-top: 20rpx;
}

.version-text {
  font-size: 24rpx;
  color: #999;
  text-align: center;
}
</style>
<style>

page{
  background: #ecfcfb;
}
</style>    